<keira-top-bar [selected]="handlerService.selected" [selectedName]="handlerService.selectedName" [isNew]="handlerService.isNew" />

<div class="container-fluid">
  <div class="content-block">
    <keira-create
      [entityTable]="entityTable"
      [entityIdField]="entityIdField"
      [customStartingId]="customStartingId"
      [handlerService]="handlerService"
      [queryService]="queryService"
    />
  </div>

  <div class="content-block">
    <p class="lead" [translate]="'SELECT_EXISTING'"></p>
    <form [formGroup]="selectService.queryForm" class="mb-2">
      <div class="row">
        <ng-container [formGroup]="selectService.fields">
          <div class="form-group col-sm-6 col-md-4 col-lg-3 col-xl-2">
            <input formControlName="entry" type="number" class="form-control form-control-sm" id="search-id" placeholder="Entry" />
          </div>
          <div class="form-group col-sm-6 col-md-4 col-lg-2 col-xl-2">
            <input formControlName="name" class="form-control form-control-sm" id="name" placeholder="Name" />
          </div>
          <div class="form-group col-sm-6 col-md-4 col-lg-2 col-xl-2">
            <input formControlName="subname" class="form-control form-control-sm" id="subname" placeholder="Subname" />
          </div>
          <div class="form-group col-sm-6 col-md-4 col-lg-2 col-xl-2">
            <input formControlName="ScriptName" class="form-control form-control-sm" id="ScriptName" placeholder="ScriptName" />
          </div>
        </ng-container>
        <div class="form-group col-sm-6 col-md-4 col-lg-3 col-xl-2">
          <input formControlName="limit" class="form-control form-control-sm" id="limit" placeholder="Limit" />
        </div>
        <div class="mb-2 col-sm-6 col-md-4 col-lg-3 col-xl-2">
          <button id="search-btn" class="btn btn-primary btn-sm" [disabled]="selectService.queryForm.invalid" (click)="onSearch()">
            <i class="fa fa-search"></i> {{ 'SEARCH' | translate }}
          </button>
        </div>
      </div>
      <keira-highlightjs-wrapper [code]="selectService.query" />
    </form>

    @if (selectService.rows) {
      <div>
        <ngx-datatable
          class="bootstrap table table-striped text-center datatable-select"
          [rows]="selectService.rows"
          [headerHeight]="DTCFG.headerHeight"
          [footerHeight]="DTCFG.footerHeight"
          [columnMode]="DTCFG.columnMode"
          [rowHeight]="DTCFG.rowHeight"
          [limit]="DTCFG.limit"
          [selectionType]="DTCFG.selectionType"
          (select)="selectService.onSelect($event)"
        >
          <ngx-datatable-column name="entry" prop="entry" [minWidth]="100">
            <ng-template let-row="row" ngx-datatable-cell-template>
              {{ row.entry }}
            </ng-template>
          </ngx-datatable-column>
          <ngx-datatable-column name="name" prop="name"></ngx-datatable-column>
          <ngx-datatable-column name="subname" prop="subname"></ngx-datatable-column>
          <ngx-datatable-column name="minlevel" prop="minlevel"></ngx-datatable-column>
          <ngx-datatable-column name="maxlevel" prop="maxlevel"></ngx-datatable-column>
          <ngx-datatable-column name="AIName" prop="AIName"></ngx-datatable-column>
          <ngx-datatable-column name="ScriptName" prop="ScriptName"></ngx-datatable-column>
        </ngx-datatable>
      </div>
    }
  </div>
</div>
